<template>
    <div :class="[
        'vit-button-group',
        {
            [`vit-button-group-${size}`]: size !== 'middle'
        }
    ]">
        <slot />
    </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue';

export default defineComponent({
    name: 'VitButtonGroup',
    props: {
        size: {
            type: String as PropType<'large' | 'middle' | 'small'>,
            default: 'middle',
            validator: (value: string) => {
                return ['large', 'middle', 'small'].includes(value);
            }
        }
    }
});
</script>

<style scoped>
.vit-button-group {
    display: inline-flex;
    position: relative;
}

.vit-button-group :deep(.vit-button) {
    position: relative;
    border-radius: 0;
}

.vit-button-group :deep(.vit-button:not(:first-child)) {
    margin-left: -1px;
}

.vit-button-group :deep(.vit-button:first-child) {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.vit-button-group :deep(.vit-button:last-child) {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.vit-button-group :deep(.vit-button:hover),
.vit-button-group :deep(.vit-button:focus),
.vit-button-group :deep(.vit-button:active) {
    z-index: 2;
}

.vit-button-group :deep(.vit-button-primary:not(:first-child):not(:last-child)) {
    border-right-color: #40a9ff;
    border-left-color: #40a9ff;
}

.vit-button-group :deep(.vit-button-primary:first-child:not(:last-child)) {
    border-right-color: #40a9ff;
}

.vit-button-group :deep(.vit-button-primary:last-child:not(:first-child)) {
    border-left-color: #40a9ff;
}
</style>